<template>
  <div>
    <el-row>
      <el-col :md="12">
        <v-chart class="grid-content" theme="ovilia-green" :options="polar" @click="demandlist" />
      </el-col>
      <el-col :md="12">
        <v-chart :options="barOptions" autosize theme="light"></v-chart>
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="24">
        <el-table class="grid-content" :data="projects" stripe style="width: 100%">
          <el-table-column prop="title" label="标题" width="180"></el-table-column>
          <el-table-column prop="start" label="开始时间"></el-table-column>
          <el-table-column prop="end" label="截止日期"></el-table-column>
          <el-table-column prop="pm" label="PM"></el-table-column>
          <el-table-column prop="developer" label="开发"></el-table-column>
        </el-table>
        <div
          class="grid-content"
          style="border: solid gray 1px; border-radius:4px; background:transparent; width:100%; height: 20px;"
        >
          <div class="grid-content" style="background:green; width: 100px; height:20px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/component/polar";
import "echarts/lib/chart/bar";
import { query, status } from "../api/demand";
export default {
  name: "Dashboard",
  components: {
    "v-chart": ECharts
  },
  data() {
    return {
      projects: Array(),
      polar: {
        title: {
          text: "需求状态分布",
          // subtext: "动态数据",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
          // formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: true,
          orient: "vertical",
          left: "left",
          data: []
        },
        series: [
          {
            name: "需求状态",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      barOptions: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        series: [
          {
            name: "直接访问",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: "搜索引擎",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      var _this = this;
      status()
        .then(function(res) {
          if (res.status == 200) {
            var rd = res.data.data;
            _this.polar.legend.data = new Array();
            _this.polar.series[0].data = new Array();
            for (var i = 0; i < rd.length; i++) {
              var sn =
                rd[i].status == 0
                  ? "未开始"
                  : rd[i].status == 1
                  ? "进行中"
                  : "已完成";
              _this.polar.legend.data[i] = sn;
              _this.polar.series[0].data[i] = {
                value: rd[i].count,
                name: sn
              };
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    demandlist(event) {
      var _this = this;
      var status = event.name == "未开始" ? 0 : event.name == "进行中" ? 1 : 2;
      query(status).then(function(res) {
        _this.projects = res.data.data;
      });
    }
  }
};
</script>
<style>
.el-table th > .cell {
  display: block;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>